<template>
	<view class="leader-view column">
		<u-sticky>
			<view class="w-100 bg-f u-p-t-12 u-p-l-32 u-p-m-10">
				<view class="u-m-b-16 row u-f-28">
					<view @click="sort=3" class="flex-center u-bdr-28 tab-item "
						:class="sort==3 ? 'bg-primary w-s-color-f' : ''">热播榜</view>
					<view @click="sort=1" class="flex-center u-bdr-28 tab-item "
						:class="sort==1 ? 'bg-primary w-s-color-f' : ''">热搜榜</view>
				</view>
				<view class="w-s-color-9 u-f-24">按实时热度值排序</view>
			</view>
		</u-sticky>
		<view class="w-100 u-p-l-32 u-p-r-36">
			<view class="row u-m-t-24 align-start" v-for="(item,index) in list" :key="item.courseId"
				@click="seVideo(item)">
				<view class="position-relative w-s-color-f">
					<u-image width="182rpx" height="228rpx" border-radius="12" :src="item.titleImg"></u-image>
					<view class="position-absolute align-start top-0 left-0 w-100 u-f-22 space-between">
						<view class="index-view" :style="{background:bgClick(index +1)}">{{index +1 }}</view>
						<view class="tag-view text-center">{{sort==3 ? '热播' : '热搜'}}</view>
					</view>
				</view>
				<view class="u-flex-1 u-m-l-20 u-p-t-22">
					<view class="space-between u-m-b-16">
						<view class="u-flex-1 one-text-ellipsis text-ellipsis u-f-28 font-weight-550">{{item.title}}
						</view>
						<view class="row">
							<image src="@/static/images/index/1.png" class="hot-img" mode=""></image>
							<view class="u-f-28 font-weight-550">{{item.goodNum}}</view>
						</view>
					</view>
					<view class="u-flex u-flex-wrap u-f-20" v-if="item.courseLabel">
						<view class="tag-item u-m-b-16 theme-bdr-box text-primary u-bdr-4 u-m-r-4"
							v-for="i in item.courseLabel.split(',')" :key="i">{{i}}</view>
					</view>
					<view class="w-s-color-67 u-f-24 u-m-b-16">{{item.classificationName}}</view>
					<view class="w-s-color-67 u-f-24">{{item.courseLabel}}</view>
				</view>
			</view>
		</view>
		<empty title="暂无视频" :isShow='false' v-if="list.length==0"></empty>
		<u-loadmore v-if="list.length > 0" :status="status" />
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				list: [],
				status: 'loadmore',
				/* 数据 */
				sort: 3,
				page: 1,
				limit: 10,
			}
		},
		onLoad() {
			this.getCourseList()
		},
		watch:{
			sort(val){
				this.page = 1;
				this.getCourseList()
			}
		},
		onReachBottom: function() {
			if (this.page < this.pages) {
				this.page += 1
				this.status = 'loading'
				this.getCourseList()

			} else {
				this.status = 'nomore'
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getCourseList()
		},
		methods: {
			/* 查看视频 */
			seVideo(item) {
				this.$navTo(
					`/me/detail/detail?id=${item.courseId}&courseDetailsId=${item.courseDetailsId}&tt_album_id=${item.dyCourseId}&tt_episode_id=${item.dyEpisodeId}`
					)
			},
			bgClick(index) {
				let bgColor
				switch (index) {
					case 1:
						bgColor = '#FF0019'
						break;
					case 2:
						bgColor = '#F03C0C'
						break;
					case 3:
						bgColor = '#F6A608'
						break;
					default:
						bgColor = "#333"
						break;
				}
				return bgColor
			},
			//最新热播
			getCourseList() {
				let data = {
					limit: this.limit,
					page: this.page,
					sort: this.sort ? this.sort : ''
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				this.$u.api.courseList(data).then(res => {
					if (res.code == 0) {
						this.pages = res.data.totalPage
						if (this.page < this.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.courseList, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
					uni.stopPullDownRefresh();

				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.leader-view {
		width: 100vw;
		min-height: 100vh;
		padding-bottom: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

		.tab-item {
			width: 136rpx;
			height: 44rpx;
			transition: all .3s;
		}

		.tag-view {
			width: 72rpx;
			height: 32rpx;
			background: #F1651A;
			border-radius: 0rpx 6rpx 0rpx 18rpx;
			line-height: 32rpx;
		}

		.index-view {
			padding: 4rpx 10rpx;
			background: #333333;
			border-radius: 12rpx 0rpx 12rpx 0rpx;
		}

		.hot-img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 6rpx;
		}

		.tag-item {
			padding: 2rpx 10rpx;
		}
	}
</style>